<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-form
        label-position="top"
        :model="listQuery"
        size="mini"
        class="gaokao"
      >
        <el-row :gutter="10">
          <el-col :span="3">
            <el-form-item label="院校名包含">
              <el-input
                v-model="listQuery.yxmc"
                placeholder="请输入院校名"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="院校名称">
              <el-select
                v-model="listQuery.yxmc1"
                placeholder="院校名称"
                clearable
                multiple
                collapse-tags
                filterable
              >
                <el-option
                  v-for="item in colleges"
                  :label="item.yxmc"
                  :value="item.yxmc"
                  :key="item.$index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="录取批次">
              <el-select
                v-model="listQuery.lqpc"
                placeholder="录取批次"
                clearable
                multiple
              >
                <el-option
                  v-for="item in lqpc"
                  :label="item.name"
                  :value="item.id"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="所在地区">
              <el-select
                v-model="listQuery.dqmc"
                placeholder="所在地区"
                clearable
                multiple
                filterable
              >
                <el-option
                  v-for="item in areas"
                  :label="item.dqmc"
                  :value="item.dqmc"
                  :key="item.$index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="所在省">
              <el-select
                v-model="listQuery.szsf"
                placeholder="所在省"
                clearable
                multiple
                filterable
              >
                <el-option
                  v-for="item in provinces"
                  :label="item.szsf"
                  :value="item.szsf"
                  :key="item.$index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="所在城市">
              <el-select
                v-model="listQuery.xxszd"
                placeholder="所在城市"
                clearable
                multiple
                filterable
              >
                <el-option
                  v-for="item in cities"
                  :label="item.xxszd"
                  :value="item.xxszd"
                  :key="item.$index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="一流院校">
              <el-select
                v-model="listQuery.syljs"
                placeholder="一流院校"
                clearable
                multiple
              >
                <el-option
                  v-for="item in syl"
                  :label="item.name"
                  :value="item.id"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="办学性质">
              <el-select
                v-model="listQuery.bxxz"
                placeholder="办学性质"
                clearable
                multiple
              >
                <el-option
                  v-for="item in bxxz"
                  :label="item.name"
                  :value="item.id"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="3">
            <el-form-item label="专业名包含">
              <el-input
                v-model="listQuery.zymc"
                placeholder="专业名包含"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="专业名称">
              <el-select
                v-model="listQuery.zymc1"
                placeholder="专业名称"
                clearable
                multiple
                collapse-tags
                filterable
              >
                <el-option
                  v-for="item in majorList"
                  :label="item.zymc"
                  :value="item.zymc"
                  :key="item.$index"
                  style="max-width: 500px"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="院校类别">
              <el-select
                v-model="listQuery.yxlx"
                placeholder="院校类别"
                clearable
                multiple
              >
                <el-option
                  v-for="item in yxlx"
                  :label="item.name"
                  :value="item.id"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label="语种">
              <el-select
                v-model="listQuery.wyyz"
                placeholder="语种"
                clearable
                multiple
              >
                <el-option
                  v-for="item in wyyz"
                  :label="item.name"
                  :value="item.id"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label="语种包含">
              <el-input
                v-model="listQuery.wymc"
                placeholder="语种包含"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label="学制">
              <el-select
                v-model="listQuery.xz"
                placeholder="学制"
                clearable
                multiple
              >
                <el-option
                  v-for="item in xz"
                  :label="item.name"
                  :value="item.id"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label="学费少于">
              <el-input v-model="listQuery.xf" placeholder="学费少于" clearable>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="专业类别">
              <el-select
                v-model="listQuery.zylb"
                placeholder="专业类别"
                clearable
                multiple
              >
                <el-option
                  v-for="item in zylb"
                  :label="item.name"
                  :value="item.id"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="3">
            <el-form-item label="专业不包含">
              <el-input
                v-model="listQuery.no_zymc"
                placeholder="专业不包含"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="备注包含">
              <el-input v-model="listQuery.bz" placeholder="备注包含" clearable>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="1" style="text-align: center">
            <el-form-item label="985">
              <el-checkbox v-model="listQuery.jbw"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="1" style="text-align: center">
            <el-form-item label="211">
              <el-checkbox v-model="listQuery.eyy"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="1" style="text-align: center">
            <el-form-item label="部属">
              <el-checkbox v-model="listQuery.zybs"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="1" style="text-align: center">
            <el-form-item label="强基">
              <el-checkbox v-model="listQuery.qjjh"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="1" style="text-align: center">
            <el-form-item label="单招">
              <el-checkbox v-model="listQuery.gzdz"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="2" style="text-align: center">
            <el-form-item label="一流专业">
              <el-checkbox v-model="listQuery.sylzy"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="2" style="text-align: center">
            <el-form-item label="条件受限">
              <el-checkbox v-model="listQuery.tjsx"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="2" style="text-align: center">
            <el-form-item label="包含新增">
              <el-checkbox v-model="listQuery.xzzy"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="2" :offset="4">
            <el-button
              type="success"
              size="small"
              icon="el-icon-search"
              style="margin-top: 20px"
              @click="handleFilter"
              >查询</el-button
            >
          </el-col>
        </el-row>
      </el-form>
      <el-table
        :data="majors"
        border
        v-loading="listLoading"
        fit
        highlight-current-row
        height="600"
        element-loading-text="拼命加载中..."
        :cell-style="cellStyle"
        size="small"
      >
        <el-table-column
          v-for="item in tableColumns"
          :label="item.title"
          :prop="item.key"
          :key="item.key"
          :width="item.width"
          :align="item.align ? item.align : 'center'"
          :fixed="item.key == 'yxmc' || item.key == 'zymc'"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
      <el-form :inline="true" style="margin-top: 10px; margin-left: 30px">
        <el-form-item label=""
          ><el-button type="primary" size="small" @click="changeSort('yxmc')"
            >按院校名称排</el-button
          ></el-form-item
        >
        <el-form-item label=""
          ><el-button type="primary" size="small" @click="changeSort('zymc')"
            >按专业名称排</el-button
          ></el-form-item
        >
        <el-form-item label=""
          ><el-button type="primary" size="small" @click="changeSort('dnzyzdf')"
            >按去年分数排</el-button
          ></el-form-item
        >
        <el-form-item label=""
          ><el-button type="success" size="small" @click="changeSort('pmmc')"
            >按大学排名排</el-button
          ></el-form-item
        >
        <el-form-item label=""
          ><el-button type="success" size="small" @click="changeSort('zypm')"
            >按专业排名排</el-button
          ></el-form-item
        >
      </el-form>
      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.page_size"
        @pagination="getCollegeMajorList"
      />
    </el-card>
    <!-- 对话框表单 -->
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getParentsPath } from "@/utils/index";
import { getCurrentDate } from "@/utils/datetime";
import {
  getWsCollegeMajors,
  getWsColleges,
  getWsMajors,
  getWsAreas,
  getWsProvinces,
  getWsCities,
} from "@/api/gaokao";

import Pagination from "@/components/Pagination";

export default {
  name: "WsAdmission",

  data() {
    return {
      form: {},
      title: "院校专业信息",
      majors: [],
      colleges: [],
      majorList: [],
      areas: [],
      provinces: [],
      cities: [],
      sorts: {
        yxmc: false,
        zymc: false,
        dnzyzdf: false,
        pmmc: false,
        zypm: false,
      },

      dialogVisible: false,
      dialogType: "new",
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        page_size: 50,
        yxmc: null,
        yxmc1: [],
        lqpc: [],
        dqmc: [],
        szsf: [],
        xxszd: [],
        syljs: [],
        bxxz: [],
        zymc: null,
        zymc1: [],
        yxlx: [],
        wyyz: [],
        wymc: null,
        xz: [],
        xf: null,
        zylb: [],
        no_zymc: null,
        bz: null,
        jbw: null,
        eyy: null,
        zybs: null,
        qjjh: null,
        gzdz: null,
        sylzy: null,
        tjsx: null,
        xzzy: null,
        ordering: null,
      },
      // 录取批次
      lqpc: [
        { id: "普通本科", name: "普通本科" },
        { id: "高职专科", name: "高职专科" },
        { id: "提前专科", name: "提前专科" },
        { id: "提前本科", name: "提前本科" },
      ],
      // 院校类型
      yxlx: [
        { id: "综合", name: "综合" },
        { id: "理工", name: "理工" },
        { id: "语言", name: "语言" },
        { id: "农林", name: "农林" },
        { id: "师范", name: "师范" },
        { id: "医药", name: "医药" },
        { id: "军事", name: "军事" },
        { id: "财经", name: "财经" },
        { id: "民族", name: "民族" },
        { id: "艺术", name: "艺术" },
        { id: "政法", name: "政法" },
        { id: "体育", name: "体育" },
      ],
      // 双一流
      syl: [
        { id: "A类", name: "A类" },
        { id: "B类", name: "学科" },
        { id: "学科", name: "B类" },
      ],
      // 办学性质
      bxxz: [
        { id: "公办", name: "公办" },
        { id: "民办", name: "民办" },
        { id: "中外合作办学", name: "中外合作办学" },
        { id: "与港澳台合办", name: "与港澳台合办" },
      ],
      wyyz: [
        { id: "不限", name: "不限" },
        { id: "英语", name: "英语" },
        { id: "英俄", name: "英俄" },
        { id: "英日", name: "英日" },
        { id: "日英", name: "日英" },
        { id: "俄英", name: "俄英" },
      ],
      xz: [
        { id: 1, name: "1" },
        { id: 2, name: "2" },
        { id: 3, name: "3" },
        { id: 4, name: "4" },
        { id: 5, name: "5" },
        { id: 6, name: "6" },
      ],
      zylb: [
        { id: "基本", name: "基本" },
        { id: "控制", name: "控制" },
        { id: "特控", name: "特控" },
        { id: "特设", name: "特设" },
      ],
      flags: [{ N: "否" }, { Y: "是" }],
      tableColumns: [
        // {
        //   key: "yxbsm",
        //   title: "顺序码",
        //   width: "80",
        // },
        {
          key: "yxdm",
          title: "院校代码",
          width: "80",
        },
        {
          key: "yxmc",
          title: "院校名称",
          width: "160px",
          align: "left",
        },
        {
          key: "zybm",
          title: "专业编码",
          width: "80",
        },
        {
          key: "zymc",
          title: "专业名称",
          width: "200px",
          align: "left",
        },

        {
          key: "lqpc",
          title: "录取批次",
        },
        {
          key: "jhrs",
          title: "2021计划人数",
          width: "70px",
        },
        {
          key: "qnjhrs",
          title: "2020年计划人数",
          width: "70px",
        },
        {
          key: "zdf1",
          title: "2020年最低分",
          width: "80px",
        },
        {
          key: "zdf2",
          title: "2019年最低分",
          width: "80px",
        },
        {
          key: "zdf3",
          title: "2018年最低分",
          width: "80px",
        },
        {
          key: "zdf4",
          title: "2017年最低分",
          width: "80px",
        },
        {
          key: "zdf5",
          title: "2016年最低分",
          width: "80px",
        },
        {
          key: "pjxc",
          title: "权重线差",
          width: "60px",
        },
        {
          key: "xccz",
          title: "标准差",
          width: "60px",
        },
        {
          key: "wyyz",
          title: "语种",
        },
        {
          key: "xz",
          title: "学制",
          width: "40px",
        },
        {
          key: "xf",
          title: "学费",
        },
        {
          key: "xxszd",
          title: "所在城市",
        },
        {
          key: "szsf",
          title: "所在省份",
        },
        {
          key: "dqmc",
          title: "地区",
        },
        {
          key: "eyy_name",
          title: "211院校",
          width: "50px",
        },
        {
          key: "jbw_name",
          title: "985院校",
          width: "50px",
        },
        {
          key: "zybs_name",
          title: "部属",
          width: "50px",
        },
        {
          key: "qjjh_name",
          title: "强基院校",
          width: "50px",
        },
        {
          key: "syljs",
          title: "双一流",
        },
        // {
        //   key: "dnzyzdf",
        //   title: "当年专业最低分",
        //   width: "85px",
        // },
        // {
        //   key: "dnzyzdwc",
        //   title: "当年专业最低位次分",
        //   width: "85px",
        // },
        {
          key: "zyzdwc1",
          title: "2020专业最低位次",
        },
        {
          key: "zyzdwc2",
          title: "2019专业最低位次",
        },
        {
          key: "zyzdwc3",
          title: "2018专业最低位次",
        },
        {
          key: "zyzdwc4",
          title: "2017专业最低位次",
        },
        {
          key: "zyzdwc5",
          title: "2016专业最低位次",
        },
        {
          key: "skf1",
          title: "2020省控分最低分",
          width: "85px",
        },
        {
          key: "skf2",
          title: "2019省控分最低分",
          width: "85px",
        },
        {
          key: "skf3",
          title: "2018省控分最低分",
          width: "85px",
        },
        {
          key: "skf4",
          title: "2017省控分最低分",
          width: "85px",
        },
        {
          key: "skf5",
          title: "2016省控分最低分",
          width: "85px",
        },
        {
          key: "gkpm",
          title: "高考排名",
        },
        {
          key: "pmmc",
          title: "大学排名",
        },
        {
          key: "zypm",
          title: "专业排名",
        },
        {
          key: "pmfl",
          title: "排名分类",
        },
        {
          key: "sylzy_name",
          title: "一流专业",
        },

        {
          key: "yxlx",
          title: "院校类型",
        },
        {
          key: "zylb",
          title: "专业类别",
        },
        {
          key: "jhcys",
          title: "计划差数",
          width: "50px",
        },
        {
          key: "snldzj",
          title: "去年征集",
          width: "50px",
        },
        {
          key: "qnldzj",
          title: "前年征集",
          width: "50px",
        },
        {
          key: "xnzypw",
          title: "校内专业排位",
        },

        {
          key: "xzzy_name",
          title: "新增专业",
          width: "40px",
        },
        {
          key: "zgbm",
          title: "主管部门",
          align: "left",
          width: "120px",
        },
        {
          key: "bxxz",
          title: "办学性质",
        },
        {
          key: "yxgmsm",
          title: "院校更名说明",
          width: "90px",
        },
        {
          key: "mzyq",
          title: "民族要求",
        },
        {
          key: "xbyq",
          title: "性别要求",
        },
        {
          key: "gzdz_name",
          title: "高职单招",
        },
        {
          key: "tjsx_name",
          title: "受限",
        },
        {
          key: "zxkm",
          title: "再选科目",
        },
        {
          key: "zylqyz",
          title: "专业录取原则",
        },
        {
          key: "bz",
          title: "备注",
          align: "left",
          width: "400px",
        },
        {
          key: "zszcyq",
          title: "招生章程要求",
          align: "left",
          width: "450px",
        },

        // {
        //   key: "yxsx",
        //   title: "院校受限",
        // },
        // {
        //   key: "zysx",
        //   title: "专业受限",
        // },
        // {
        //   key: "dqxz",
        //   title: "地区选择",
        // },

        // {
        //   key: "tdbl",
        //   title: "投档比例",
        // },

        {
          key: "ylqpc3",
          title: "2017批次",
        },
        {
          key: "ylqpc4",
          title: "2016批次",
        },
        {
          key: "ylqpc5",
          title: "2015批次",
        },
        {
          key: "sxxz",
          title: "受限限制",
        },
        {
          key: "snldzj",
          title: "2019征集",
        },
        {
          key: "qnldzj",
          title: "2018征集",
        },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["uid"]),
    getTitle() {
      return this.dialogType == "new"
        ? `新增${this.title}`
        : `${this.title}详情`;
    },
  },
  components: {
    Pagination,
  },
  created() {
    this.getCollegeMajorList();
    this.getCollegeList();
    this.getMajorList();
    this.getAreaList();
    this.getProvinceList();
    this.getCityList();
  },
  methods: {
    getCollegeMajorList() {
      this.listLoading = true;
      getWsCollegeMajors(this.listQuery)
        .then((res) => {
          this.total = res.count;
          this.majors = res.results;
          this.listLoading = false;
        })
        .catch((error) => {
          console.log(error.message);
          this.$message.error("获取数据失败");
          this.listLoading = false;
        });
    },
    getCollegeList() {
      getWsColleges()
        .then((res) => {
          this.colleges = res;
        })
        .catch((error) => {
          this.$message.error("获取院校编码错误");
        });
    },
    getMajorList() {
      getWsMajors()
        .then((res) => {
          this.majorList = res;
        })
        .catch((error) => {
          this.$message.error("获取专业编码失败");
        });
    },
    getAreaList() {
      getWsAreas()
        .then((res) => {
          this.areas = res;
        })
        .catch((error) => {
          this.$message.error("获取所在地区失败");
        });
    },
    getProvinceList() {
      getWsProvinces()
        .then((res) => {
          this.provinces = res;
        })
        .catch((error) => {
          this.$message.error("获取所在省份失败");
        });
    },
    getCityList() {
      getWsCities()
        .then((res) => {
          this.cities = res;
        })
        .catch((error) => {
          this.$message.error("获取所在城市失败");
        });
    },
    // 查询
    handleFilter() {
      this.listQuery.page = 1;
      this.getCollegeMajorList();
    },
    changeSort(val) {
      const temp = this.sorts[val];
      this.sorts[val] = !temp;

      this.listQuery.ordering = !temp ? val : "-" + val;
      this.handleFilter();
    },
    // 查看详情
    handleEdit(scope) {
      this.form = Object.assign({}, scope.row);
      this.dialogType = "edit";
      this.dialogVisible = true;
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      let cellStyle;
      console.log(row.ylqpc5);
      if (row.ylqpc5 === "本科三批") {
        cellStyle = "color:red";
      } else if (row.ylqpc5 === "本科二批") {
        cellStyle = "color:#FF00FF";
      } else if (row.ylqpc5 == "" && row.ylqpc4 === "本科二批") {
        cellStyle = "color:#FF00FF";
      }
      return cellStyle;
    },
  },
};
</script>

<style lang='scss' scoped>
.app-container {
  padding: 10px;

  .el-table {
    margin-top: 10px;
    width: 100%;
  }
  .el-form-item {
    margin-bottom: 2px;
  }
  // .el-select {
  //   width: 100%;
  // }
  .item {
    margin-top: 8px;
  }
}
</style>